<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

		<title>Top of the Menu</title>

		<link rel="stylesheet" type="text/css" href="/static/css/totm.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/jquery-ui-1.8.16.custom.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/bootstrap-1.2.0.css" />
		<link href='http://fonts.googleapis.com/css?family=Oswald|Pacifico|Coustard' rel='stylesheet' type='text/css'>
		
		<script type="text/javascript" src="/static/js/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="/static/js/underscore.js"></script>
		<script type="text/javascript" src="/static/js/backbone.js"></script>
		<script type="text/javascript" src="/static/js/json2.js"></script>
		<script type="text/javascript" src="/static/js/totm.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

		<script type="text/javascript">
			// Activate the dropdown menu
			// ============================================================
			$(document).ready( function() {
				$("body").bind("click", function (e) {
					$('.dropdown-toggle').parent("li").removeClass("open");
				});
				$(".dropdown-toggle").click( function (e) {
					var $li = $(this).parent("li").toggleClass('open');
					return false;
				});
			});
		</script>	
		
		{% block external %}{% endblock %}
	</head>
	<body>
		<div class="top_section">
			<h1 class="center"><a href="/"><span class="caps">TOP</span><span class="lower">of the </span><span class="caps">MENU</span></a></h1>
		</div>
		<div class="container">
			<div class="content_section">
				{% block content %}{% endblock %}
			</div>
		</div>
	</body>
</html>